

<template>
  <div>
    <h1>这是One组件</h1>
    <p>dasdas</p>
    <h1 ref="aa" @click="hidd">{{ count }}</h1>
    <h1>{{ count }}</h1>
    <button @click="xiezai">卸载</button>
    <button @click="changeData">改变数据</button>
  </div>
</template>

<script>
export default {
  name: "One",
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    hidd() {
      // console.log(this.$refs.aa);
      this.$refs.aa.style.opacity = 0;
      // console.log( this.$$refs("aa"));
    },
    changeData() {
      this.count++;
    },
    xiezai() {
      // 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
      // 触发 beforeDestroy 和 destroyed 的钩子。
      this.$destroy();
    },
  },
  /* 
  vue的生命周期有5阶段
  分别是初始 模板 挂载 更新 卸载
  在初始阶段 vue 初始化了生命周期和事件
  */
  beforeCreate() {
    // console.log('this',this);
    //在初始化之前并没有进行数据代理
    // console.log(this.count);
    // debugger;
  },
  created() {
    // console.log('this',this);
    //在created函数中已经完成数据代理 可以在vm身上拿到数据
    // console.log(this.count);
    // debugger;
  },
  //模板阶段
  //会继续两个判断
  //首先判断是否有el 如果有再判断是否有template模板
  //有则 将template模板作为 渲染函数的参数 渲染页面
  //其次 如果没有el 则也判断是否有template模板
  //有则 将template模板作为 渲染函数的参数 渲染页面
  //没有则 以所在的div 作为模板

  //挂载阶段
  //挂载前阶段 此页面显示的还是未经过vue编译的dom
  //所以对dom的操作不起效果
  beforeMount() {
    // console.log(this, "this");
    // debugger;
  },
  //  Mounted阶段执行的时候,浏览器中展示的已经是Vue生成的DOM了
  // 对dom的操作也有效果了
  Mounted() {
    console.log(this, "this");
    // debugger;
  },
  //更新阶段
  //更新前阶段
  // 错误 You may have an infinite update loop in a component render function.
  //原因 修改了 原来的数据 就要更新 但是更新了 又要 渲染页面 最终渲染函数无线循环GG
  //beforeUpdate函数
  //改变数据的时候促发
  //改变数据 数据改变 但页面还没有刷新
  beforeUpdate() {
    // console.log(this, "this");
    // debugger;
  },
  //updated 根据新数据，生成新的虚拟dom，与就的虚拟dom进行对比 ，最终完成页面刷新
  //结果 页面 是新的 数据 也是新的
  updated() {
    // console.log(this, "this");
    // debugger;
  },
  //销毁阶段
  //此时vm中所有的data，methods、指令都是可以用
  //所有 一般再这阶段 进行一些收尾阶段 向关闭定时器等等
  //但是 这个修改数据没意义 因为 并不会触发更新
  beforeDestroy() {
    console.log(this, "卸载前this");
    // debugger;
  },
  destroyed() {
    console.log(this, "卸载后this");
  },
};
</script>


<style>
</style>